<!-- 职位名片组件 -->
<script setup>
import { defineProps } from 'vue'

defineProps({
  data: {
    type: Object
  }
})
</script>

<template>
  <div class="jobCar-box">
    <div class="top">
      <div style="color: #ccc; font-size: 22px; margin-right: 5px">
        <el-icon><Comment /></el-icon>
      </div>
      <div class="title">{{ data.postsName }}</div>
      <div style="color: red; position: absolute; right: 15px">
        {{ data.postsSalary }}
      </div>
    </div>
    <div class="middle">
      <el-tag
        v-for="(item, index) in data.postsKey"
        :key="index"
        class="ml-2"
        type="info"
        style="margin-left: 10px"
        >{{ item }}</el-tag
      >
    </div>
    <div class="buttom">
      <el-avatar
        style="margin-top: 15px; margin-left: 10px"
        shape="square"
        :size="20"
        :src="data.companyProfilePicture"
      />
      <span
        style="
          font-size: 16px;
          position: absolute;
          top: 15px;
          margin-left: 10px;
        "
        >{{ data.companyName }}</span
      >
      <span
        style="
          display: inline-block;
          position: absolute;
          right: 15px;
          top: 15px;
        "
        >{{ data.companyCategory }} |
        {{ data.goPublic === 0 ? '未上市' : '已上市' }}</span
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jobCar-box {
  width: 380px;
  height: 140px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.5s ease; /* 过渡效果，持续0.5秒 */
  .top {
    display: flex;
    margin-top: 15px;
    margin-left: 10px;
    .title {
      font-size: 16px;
      width: 140px;
      white-space: nowrap; /* 阻止文本换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      transition: color 0.5s ease; /* 过渡效果，持续0.5秒 */
    }
    .title:hover {
      color: #00b7b6;
    }
  }
  .middle {
    margin-top: 10px;
  }
  .buttom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, #e4f6f6, #fcfbfa);
  }
}
.jobCar-box:hover {
  box-shadow: 5px 5px 20px #ccc;
  .title {
    color: #00b7b6;
  }
}
</style>
